﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="js/jquery.js"></script>
    <script type="text/javascript">
    dojoConfig = {
        parseOnLoad: true,
        packages: [{
            name: 'tdlib',
            location:"/js/tdlib"
        }]
    };
    </script>
    <link href="css/esri.css" rel="stylesheet" />
    <link href="css/index.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="http://ngac.org.cn/jsapi/arcgis/3.9/js/dojo/dijit/themes/claro/claro.css" />
    <script type="text/javascript" src="http://ngac.org.cn/jsapi/arcgis/3.9/"></script>

    <style>
        html, body, #map {
            height: 100%;
            width: 100%;
            margin: 0;
        }
    </style>
</head>

<body>
   <div id="toolbar-container">
       <ul>
           <li>
               <i id="reset"><span class="glyphicon glyphicon-screenshot" > 复位</span></i>
           </li>
           <li>
               <i onclick="measutreLength()"><span class="glyphicon glyphicon-minus" > 测线</span></i>
           </li>
           <li>
               <i onclick="measutreArea()"><span class="glyphicon glyphicon-th-large"> 测面</span></i>
           </li>
           <li>
               <i onclick="Point()"><span class="glyphicon glyphicon-adjust"> 画点</span></i>
           </li>
           <li>
               <i onclick="Polyline()"><span class="glyphicon glyphicon-align-justify"> 画线</span></i>
           </li>
           <li>
               <i onclick="Polygon()"><span class="glyphicon glyphicon-unchecked"> 画面</span></i>
           </li>
           <li>
               <i onclick="refresh()"><span class="glyphicon glyphicon-trash"> 清除</span></i>
           </li>
       </ul>
   </div>
    <p id="location" style="position:absolute;bottom:5px;z-index:50;padding-left:15px; background-color:rgba(167, 251, 246, 0.71);font-size:small" ;opacity="0.8"></p>
    <div id="map">
    </div>

    <script type="text/javascript">
        var map, navToolbar, mapPoint;
        var navDraw;
        var gsvc;
        var isshow;
        var mylayer = new Array();

        require(["esri/map",
           "tdlib/TDTLayer",
           "tdlib/TDTAnnoLayer",                
           "esri/geometry/Extent",
           "esri/InfoTemplate",
           "esri/geometry/Point",
           "esri/toolbars/draw",
           "esri/graphic",
           "esri/SpatialReference",
           "esri/symbols/SimpleFillSymbol",
           "esri/symbols/SimpleLineSymbol",
           "dojo/_base/Color",
           "dojo/domReady!"],
       function (Map,
            TDTLayer,
            TDTAnnoLayer,           
            SpatialReference,
            InfoTemplate,
            Point,
            Draw,
            Graphic,
            Extent,
            SimpleFillSymbol,
            SimpleLineSymbol,
            Color
       ) {
           //底地图
           map = new Map("map", { logo: false });
           var basemap = new TDTLayer();
           map.addLayer(basemap);
           var annolayer = new TDTAnnoLayer();
           map.addLayer(annolayer);
           var pt = new Point(107.14, 27.07);
           map.centerAndZoom(pt, 8);
           map.on("mouse-move", function (e) {
               $('#location').text("经度:" + e.mapPoint.x.toString().substring(0, 10) + "  维度:" + e.mapPoint.y.toString().substring(0, 10));
           });

           navDraw = new esri.toolbars.Draw(map);
           dojo.connect(navDraw, "onDrawEnd", doMeasure);
           gsvc = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

           dojo.declare("Mylayer", TDTLayer, {
               getTileUrl: function (level, row, col) {
                   return "http://219.142.81.86/igserver/ogc/kvp/TAS10A52299999/WMTSServer/1.0.0/TAS10A52299999/default/EPSG:4326TAS10A52299999_dpi96_GB/" + (level - 1) + "/" + row + "/" + col + ".png";
               }
           });
           Mylayer = new Mylayer();
           map.addLayer(Mylayer);


           $('#reset').bind('click', function () {
               var pt = new Point(107.14, 27.07);
               map.centerAndZoom(pt, 8);
           });
          
       });



        function measutreLength() {
            navDraw.activate(esri.toolbars.Draw.POLYLINE);
            isshow = 1;
        }
        function measutreArea() {
            navDraw.activate(esri.toolbars.Draw.POLYGON);
            isshow = 1;
        }
        function Point() {
            navDraw.activate(esri.toolbars.Draw.POINT);
            isshow = 0;
        }
        function Multipoint() {
            navDraw.activate(esri.toolbars.Draw.MULTI_POINT);
            isshow = 0;
        }
        function Line() {
            navDraw.activate(esri.toolbars.Draw.LINE);
            isshow = 0;
        }
        function Polyline() {
            navDraw.activate(esri.toolbars.Draw.POLYLINE);
            isshow = 0;
        }
        function Polygon() {
            navDraw.activate(esri.toolbars.Draw.POLYGON);
            isshow = 0;
        }

       



        //量算
        function doMeasure(geometry) {
            //更加类型设置显示样式
            measuregeometry = geometry;
            navDraw.deactivate();
            switch (geometry.type) {
                case "point":
                    var symbol = new esri.symbol.SimpleMarkerSymbol(
                        esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE,    // 样式,STYLE_CIRCLE(●),STYLE_CROSS(+),STYLE_DIAMOND(◆),STYLE_SQUARE(■),STYLE_X(X)  
                        10, // 像素  
                        new esri.symbol.SimpleLineSymbol(
                            esri.symbol.SimpleLineSymbol.STYLE_SOLID,  // 样式,STYLE_DASH(破折号),STYLE_DASHDOT(点划线),STYLE_DASHDOTDOT,STYLE_DOT(点),STYLE_NULL,STYLE_SOLID(实线)  
                            new dojo.Color([0, 0, 255]),  // 颜色  
                            2  // 像素  
                        ),
                        new dojo.Color([255, 255, 255, 0.25])  // 颜色和透明度  
                    );
                    break;
                case "polyline":
                    var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 255]), 2);
                    break;
                case "polygon":
                    var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 255]), 2), new dojo.Color([0, 0, 255, 0.25]));
                    break;
                case "extent":
                    var symbol = new esri.symbol.SimpleFillSymbol(
                        esri.symbol.SimpleFillSymbol.STYLE_SOLID,
                        new esri.symbol.SimpleLineSymbol(
                            esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                            new dojo.Color([0, 0, 255]),
                            2
                        ),
                        new dojo.Color([255, 255, 0, 0.25])
                    );
                    break;
                case "multipoint":
                    var symbol = new esri.symbol.SimpleMarkerSymbol(
                        esri.symbol.SimpleMarkerSymbol.STYLE_SOLID,
                        12,
                        new esri.symbol.SimpleLineSymbol(
                            esri.symbol.SimpleLineSymbol.STYLE_SOLID,
                            new dojo.Color([0, 0, 255]),
                            2
                        ),
                        new dojo.Color([255, 255, 255, 0.5])
                    );
                    break;
            }
            //设置样式
            var graphic = new esri.Graphic(geometry, symbol);
            //清除上一次的画图内容
            // map.graphics.clear();
            map.graphics.add(graphic);
            mylayer.push(graphic);
            //进行投影转换，完成后调用projectComplete
            if (isshow == 1) {
                MeasureGeometry(geometry);
            }
        }

        function refresh() {
            $.each(mylayer, function (i, item) {
                map.graphics.remove(item);
            })
           
        }

       

        //投影转换完成后调用方法
        function MeasureGeometry(geometry) {
            //如果为线类型就进行lengths距离测算
            if (geometry.type == "polyline") {

                var lengthParams = new esri.tasks.LengthsParameters();
                var polyline = new esri.geometry.Polyline(geometry);
                lengthParams.polylines = [polyline];
                lengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_METER;
                lengthParams.geodesic = true;
                lengthParams.polylines[0].spatialReference = new esri.SpatialReference(4326);
                gsvc.lengths(lengthParams);
                dojo.connect(gsvc, "onLengthsComplete", outputDistance);
            }
                //如果为面类型需要先进行simplify操作在进行面积测算
            else if (geometry.type == "polygon") {
                var areasAndLengthParams = new esri.tasks.AreasAndLengthsParameters();
                areasAndLengthParams.lengthUnit = esri.tasks.GeometryService.UNIT_METER;
                areasAndLengthParams.areaUnit = esri.tasks.GeometryService.UNIT_SQUARE_METERS;
                this.outSR = new esri.SpatialReference({ wkid: 102113 });

                gsvc.project([geometry], this.outSR, function (geometry) {
                    gsvc.simplify(geometry, function (simplifiedGeometries) {
                        areasAndLengthParams.polygons = simplifiedGeometries;
                        areasAndLengthParams.polygons[0].spatialReference = new esri.SpatialReference(102113);
                        gsvc.areasAndLengths(areasAndLengthParams);
                    });
                });
                dojo.connect(gsvc, "onAreasAndLengthsComplete", outputAreaAndLength);
            }
        }

        //显示测量距离
        function outputDistance(result) {
            var CurX = measuregeometry.paths[0][measuregeometry.paths[0].length - 1][0];
            var CurY = measuregeometry.paths[0][measuregeometry.paths[0].length - 1][1];
            var CurPos = new esri.geometry.Point(CurX, CurY, map.spatialReference);
            map.infoWindow.setTitle("距离测量");
            map.infoWindow.setContent(" 测 量 长 度 ： <strong>" + parseInt(String(result.lengths[0])) + "米</strong>");
            map.infoWindow.show(CurPos);
        }

        //显示测量面积
        function outputAreaAndLength(result) {
            var CurX = (measuregeometry._extent.xmax + measuregeometry._extent.xmin) / 2;
            var CurY = (measuregeometry._extent.ymax + measuregeometry._extent.ymin) / 2
            var CurPos = new esri.geometry.Point(CurX, CurY, map.spatialReference);
            map.infoWindow.setTitle("面积测量");
            map.infoWindow.setContent(" 面积 ： <strong>" + parseInt(String(result.areas[0])) + "平方米</strong> 周长：" + parseInt(String(result.lengths[0])) + "米");
            map.infoWindow.show(CurPos);            
        }

    </script>
 
</body>
</html>
